/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div :style="{position: 'absolute', left: Data.busleft, top: Data.bustop}" class="westbusmap">
    <div :class="Data.id >= 5 && Data.id <= 8 ? '' : 'hide'">
      <svg
        version="1.1"
        id="图层_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 91 24"
        style="enable-background:new 0 0 91 24;"
        xml:space="preserve"
        :width="IconLengh"
        :height="IconWdith"
      >
        <g id="图层_2" data-name="图层 2">
          <g id="图层_1-2" data-name="图层 1">
            <g id="有轨电车-西"  v-if="Data.controltype === 5">
              <path
                class="cls-1"
                d="M4,24H87a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4V20A4,4,0,0,0,4,24Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="84.5" y="2.4" width="3" height="0.5"></rect>
                <path
                  class="cls-3"
                  d="M8.4,2.4h5.7v.5H8.4Zm7.6,0h5.7v.5H16Zm7.6,0h5.7v.5H23.6Zm7.6,0h5.7v.5H31.2Zm7.6,0h5.7v.5H38.8Zm7.7,0h5.7v.5H46.5Zm7.6,0h5.7v.5H54.1Zm7.6,0h5.7v.5H61.7Zm7.6,0H75v.5H69.3Zm7.6,0h5.7v.5H76.9Z"
                ></path>
                <rect class="cls-3" x="3.5" y="2.4" width="3" height="0.5"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="84.5" y="21.2" width="3" height="0.5"></rect>
                <path
                  class="cls-3"
                  d="M8.4,21.2h5.7v.5H8.4Zm7.6,0h5.7v.5H16Zm7.6,0h5.7v.5H23.6Zm7.6,0h5.7v.5H31.2Zm7.6,0h5.7v.5H38.8Zm7.7,0h5.7v.5H46.5Zm7.6,0h5.7v.5H54.1Zm7.6,0h5.7v.5H61.7Zm7.6,0H75v.5H69.3Zm7.6,0h5.7v.5H76.9Z"
                ></path>
                <rect class="cls-3" x="3.5" y="21.2" width="3" height="0.5"></rect>
              </g>
              <path
                class="cls-3"
                d="M41.9,13.9h0a4.87,4.87,0,0,0-4.8-4.8H34.6l.6-.4c.1,0,.1-.1.1-.2s-.1-.1-.1-.2l-2.4-.9a.37.37,0,0,0-.3.1.37.37,0,0,0,.1.3l2,.8-.8.5H17.4a.47.47,0,0,0-.5.5v6a.47.47,0,0,0,.5.5h23C41.3,16.2,41.9,14.7,41.9,13.9Zm-22.4-1a.43.43,0,0,1-.4.4H17.9a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4h1.2a.43.43,0,0,1,.4.4Zm2.3,0a.43.43,0,0,1-.4.4H20.2a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4h1.2a.43.43,0,0,1,.4.4Zm2.6,0a.43.43,0,0,1-.4.4H22.8a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4H24a.43.43,0,0,1,.4.4Zm2.3,0a.43.43,0,0,1-.4.4H25.1a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4h1.2a.43.43,0,0,1,.4.4Zm2.4,0a.43.43,0,0,1-.4.4H27.5a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4h1.2a.43.43,0,0,1,.4.4Zm2.5,0a.43.43,0,0,1-.4.4H30a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4h1.2a.43.43,0,0,1,.4.4Zm2.4,0a.43.43,0,0,1-.4.4H32.4a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4h1.2a.43.43,0,0,1,.4.4Zm2.3,0a.43.43,0,0,1-.4.4H34.7a.43.43,0,0,1-.4-.4V11.2a.43.43,0,0,1,.4-.4H36a.43.43,0,0,1,.4.4v1.7Zm3.5,1.9a.65.65,0,0,1-.6.6H38a.65.65,0,0,1-.6-.6V11.5a.65.65,0,0,1,.6-.6,1.79,1.79,0,0,1,1.8,1.8Z"
              ></path>
              <path class="cls-3" d="M16.3,16.9H42.6a.4.4,0,0,1,0,.8H16.3a.4.4,0,1,1,0-.8Z"></path>
            </g>
            <g id="公交车-西"  v-if="Data.controltype === 3">
              <path
                class="cls-1"
                d="M4,24H87a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4V20A4,4,0,0,0,4,24Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="84.5" y="2.3" width="3" height="0.5"></rect>
                <path
                  class="cls-3"
                  d="M8.4,2.3h5.7v.5H8.4Zm7.6,0h5.7v.5H16Zm7.6,0h5.7v.5H23.6Zm7.6,0h5.7v.5H31.2Zm7.6,0h5.7v.5H38.8Zm7.7,0h5.7v.5H46.5Zm7.6,0h5.7v.5H54.1Zm7.6,0h5.7v.5H61.7Zm7.6,0H75v.5H69.3Zm7.6,0h5.7v.5H76.9Z"
                ></path>
                <rect class="cls-3" x="3.5" y="2.3" width="3" height="0.5"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="84.5" y="21.1" width="3" height="0.5"></rect>
                <path
                  class="cls-3"
                  d="M8.4,21.1h5.7v.5H8.4Zm7.6,0h5.7v.5H16Zm7.6,0h5.7v.5H23.6Zm7.6,0h5.7v.5H31.2Zm7.6,0h5.7v.5H38.8Zm7.7,0h5.7v.5H46.5Zm7.6,0h5.7v.5H54.1Zm7.6,0h5.7v.5H61.7Zm7.6,0H75v.5H69.3Zm7.6,0h5.7v.5H76.9Z"
                ></path>
                <rect class="cls-3" x="3.5" y="21.1" width="3" height="0.5"></rect>
              </g>
              <path
                class="cls-3"
                d="M35.5,15.6a1.4,1.4,0,1,0,1.4-1.4A1.51,1.51,0,0,0,35.5,15.6Zm.4,0a1,1,0,0,1,1-1,.94.94,0,0,1,1,1,1,1,0,1,1-2,0Z"
              ></path>
              <path
                class="cls-3"
                d="M22,15.6a1.4,1.4,0,1,0,1.4-1.4A1.43,1.43,0,0,0,22,15.6Zm.4,0a1,1,0,1,1,1,1A1,1,0,0,1,22.4,15.6Z"
              ></path>
              <path
                class="cls-3"
                d="M16.1,10.9v3.7c.9.2,3,.7,4.1,1h1.2a1.88,1.88,0,0,1,1.9-1.8,2,2,0,0,1,1.9,1.8h9.9A1.88,1.88,0,0,1,37,13.8a2,2,0,0,1,1.9,1.8h3.6a.47.47,0,0,0,.5-.5V12.3l-.6-.3V9.6A1.37,1.37,0,0,0,41,8.2H19A2.74,2.74,0,0,0,16.1,10.9ZM39.4,9.8a.47.47,0,0,1,.5-.5h.8a.47.47,0,0,1,.5.5v4.5a.47.47,0,0,1-.5.5H40a.47.47,0,0,1-.5-.5l-.1-4.5Zm-5.6-.2a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H34.2a.43.43,0,0,1-.4-.4Zm-5.3,0a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H28.9a.43.43,0,0,1-.4-.4Zm-5.4,0a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H23.5a.43.43,0,0,1-.4-.4Zm-5.3,0a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H18.2a.43.43,0,0,1-.4-.4Z"
              ></path>
            </g>
            <g id="BRT-西"  v-if="Data.controltype === 4">
              <path
                class="cls-1"
                d="M4,24H87a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4V20A4,4,0,0,0,4,24Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="84.5" y="2.4" width="3" height="0.5"></rect>
                <path
                  class="cls-3"
                  d="M8.4,2.4h5.7v.5H8.4Zm7.6,0h5.7v.5H16Zm7.6,0h5.7v.5H23.6Zm7.6,0h5.7v.5H31.2Zm7.6,0h5.7v.5H38.8Zm7.7,0h5.7v.5H46.5Zm7.6,0h5.7v.5H54.1Zm7.6,0h5.7v.5H61.7Zm7.6,0H75v.5H69.3Zm7.6,0h5.7v.5H76.9Z"
                ></path>
                <rect class="cls-3" x="3.5" y="2.4" width="3" height="0.5"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="84.5" y="21.2" width="3" height="0.5"></rect>
                <path
                  class="cls-3"
                  d="M8.4,21.2h5.7v.5H8.4Zm7.6,0h5.7v.5H16Zm7.6,0h5.7v.5H23.6Zm7.6,0h5.7v.5H31.2Zm7.6,0h5.7v.5H38.8Zm7.7,0h5.7v.5H46.5Zm7.6,0h5.7v.5H54.1Zm7.6,0h5.7v.5H61.7Zm7.6,0H75v.5H69.3Zm7.6,0h5.7v.5H76.9Z"
                ></path>
                <rect class="cls-3" x="3.5" y="21.2" width="3" height="0.5"></rect>
              </g>
              <path
                class="cls-3"
                d="M35.5,15.7a1.4,1.4,0,1,0,1.4-1.4A1.43,1.43,0,0,0,35.5,15.7Zm.4,0a1,1,0,0,1,1-1,.94.94,0,0,1,1,1,1,1,0,0,1-2,0Z"
              ></path>
              <path
                class="cls-3"
                d="M22,15.7a1.4,1.4,0,1,0,1.4-1.4A1.37,1.37,0,0,0,22,15.7Zm.4,0a1,1,0,1,1,1,1A1,1,0,0,1,22.4,15.7Z"
              ></path>
              <path
                class="cls-3"
                d="M16.1,10.9v3.7c.9.2,3,.7,4.1,1h1.2a1.88,1.88,0,0,1,1.9-1.8,2,2,0,0,1,1.9,1.8h9.9A1.88,1.88,0,0,1,37,13.8a2,2,0,0,1,1.9,1.8h3.6a.47.47,0,0,0,.5-.5V12.4l-.6-.3V9.7A1.37,1.37,0,0,0,41,8.3H19A2.72,2.72,0,0,0,16.1,10.9Zm23.3-1a.47.47,0,0,1,.5-.5h.8a.47.47,0,0,1,.5.5v4.5a.47.47,0,0,1-.5.5H40a.47.47,0,0,1-.5-.5l-.1-4.5Zm-5.6-.2a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H34.2a.43.43,0,0,1-.4-.4Zm-5.3,0a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H28.9a.43.43,0,0,1-.4-.4Zm-5.4,0a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H23.5a.43.43,0,0,1-.4-.4Zm-5.3,0a.43.43,0,0,1,.4-.4h3.9a.43.43,0,0,1,.4.4v1.7a.43.43,0,0,1-.4.4H18.2a.43.43,0,0,1-.4-.4Z"
              ></path>
              <path
                class="cls-3"
                d="M8.2,6.7h4.3V8.3a2,2,0,0,1-.1.8,1,1,0,0,1-.4.5,1.42,1.42,0,0,1-.6.2.75.75,0,0,1-.5-.1,2.18,2.18,0,0,1-.4-.5.92.92,0,0,1-.4.6,1.45,1.45,0,0,1-.7.2,1.27,1.27,0,0,1-.6-.1,1.38,1.38,0,0,1-.4-.3c-.1-.1-.1-.4-.1-.5s-.1-.4-.1-.7Zm.5.6V8.8c0,.1.1.2.1.3s.2.1.3.2.2.1.4.1.3,0,.4-.1l.3-.3c0-.1.1-.4.1-.6v-1L8.7,7.3Zm2,0V8.7c0,.1.1.3.2.3s.2.1.4.1a.6.6,0,0,0,.4-.1c.1-.1.2-.2.2-.3s.1-.2.1-.5V7.3Z"
              ></path>
              <path
                class="cls-3"
                d="M8.2,10.8h4.3v1.9a2.22,2.22,0,0,1-.1.9,1,1,0,0,1-.4.5,1.42,1.42,0,0,1-.6.2,1.14,1.14,0,0,1-.8-.3,1.88,1.88,0,0,1-.4-.9c-.1.2-.1.3-.2.3a3.17,3.17,0,0,1-.6.5l-1.2.7v-.7l.9-.6a5.92,5.92,0,0,0,.6-.4l.3-.3a.37.37,0,0,0,.1-.3v-1H8.2Zm2.4.5v1.2c0,.3,0,.5.1.6s.1.3.3.3.2.1.4.1a.76.76,0,0,0,.5-.2,1.17,1.17,0,0,0,.2-.7V11.2l-1.5.1Z"
              ></path>
              <path class="cls-3" d="M8.2,16.1H12V14.7h.5v3.4H12V16.7H8.2Z"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: 'westBusSvg',
  props: {
    IconLengh: {
      // 相位图标长度
      type: String,
      default: '91px'
    },
    IconWdith: {
      // 相位图标宽度
      type: String,
      default: '24px'
    },
    Data: {
      type: Object
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.invisible {
  visibility: hidden;
}
.hide {
  display: none;
}
.cls-1 {
  fill: #5f5f5f;
  opacity: 0.8;
  isolation: isolate;
}
.cls-2 {
  opacity: 0.3;
}
.cls-3 {
  fill: #fff;
}
</style>
